<template>
  <div class="wpwork-preview-main user-form">
    <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="类型：">
            <el-select v-model="listQuery.type" @change="selectChange" placeholder="--请选择--">
              <el-option label="个人" value="person"></el-option>
              <el-option label="群组" value="group"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="listQuery.type == 'person'">
          <el-form-item label="人员名称">
            <el-input v-model="listQuery.name" placeholder="请输入人员名称" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起始时间：">
            <el-date-picker v-model="listQuery.startTime" type="datetime" placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="截止时间：">
            <el-date-picker v-model="listQuery.endTime" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{$t('common.search')}}</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
            </el-button>
            <el-button type="primary" icon="el-icon-download" v-loading="btnLoading"
              @click="downLoad">导出</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
      <wpwork-table v-if="listQuery.type == 'person'" v-loading="listLoading" :data="tableData"
        :hasNO="false">
        <el-table-column prop="realName" label="人员名称" />
        <el-table-column prop="time" label="最新上报时间" :formatter="wpwork.tableDateFormat" />
        <el-table-column prop="distance" label="距离(米)" />
        <!-- <el-table-column prop="lng" label="经度" /> -->
        <!-- <el-table-column prop="lat" label="纬度" /> -->
        <el-table-column prop="remark1" label="最新位置描述" min-width="170" show-overflow-tooltip
          align="center" />
        <el-table-column label="操作">
          <template slot-scope="scope" v-if="!scope.row.isAdministrator">
            <el-button size="mini" type="text" @click="openMap(scope.row)">
              查看地图
            </el-button>
          </template>
        </el-table-column>
      </wpwork-table>
      <wpwork-table v-else v-loading="listLoading" :data="tableData" :hasNO="false">
        <el-table-column prop="groupname" label="群组名" />
        <el-table-column prop="realName" label="人员名称" />
        <el-table-column prop="totalDistance" label="距离(米)" />
      </wpwork-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="initData" />
    </div>
    <wpworkMap type="point" :initialCoordinates="initialCoordinates" v-if="locationVisible2"
      @close="mapRtn" />
  </div>
</template>

<script>
import request from "@/utils/request";
import wpworkMap from "@/components/wpworkMap/index.vue";
export default {
  name: 'positioningInfo',
  components: {
    wpworkMap,
  },
  data() {
    return {
      btnLoading: false,
      initialCoordinates: [],
      locationVisible2: false,
      tableData: [],
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        keyword: '',
        startTime: '',
        endTime: '',
        name: '',
        type: 'person'
      },
      total: 0,
    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    downLoad() {
      this.btnLoading = true
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.name = this.listQuery.name ? this.listQuery.name : ''
      if (this.listQuery.type == 'person') {
        request({
          url: `/api/example/gpsInfo/exportExcelByPerson`,
          method: "post",
          params: this.listQuery
        }).then(res => {
          this.btnLoading = false
          if (!res.data.url) return
          this.wpwork.downloadFile(res.data.url)
          this.visible = false
        }).catch(() => { this.btnLoading = false })
      } else {
        request({
          url: `/api/example/gpsInfo/exportExcelByGroup`,
          method: "post",
          params: this.listQuery
        }).then(res => {
          this.btnLoading = false
          if (!res.data.url) return
          this.wpwork.downloadFile(res.data.url)
          this.visible = false
        }).catch(() => { this.btnLoading = false })
      }

    },
    selectChange() {
      this.initData()
    },
    search() {
      this.listQuery.currentPage = 1
      this.listQuery.pageSize = 20
      this.initData()
    },
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    initData() {
      this.listLoading = true
      this.listLoading = true
      console.log("🚀 ~ :135 ~ initData ~ this.listQuery:", this.listQuery)
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.name = this.listQuery.name ? this.listQuery.name : ''
      if (this.listQuery.type == 'person') {
        request({
          url: `/api/example/gpsInfo/getListByPerson`,
          method: "post",
          params: this.listQuery
        }).then((res) => {
          console.log("🚀 ~ :122 ~ initData ~ res:", res)
          this.tableData = res.data.records;
          this.total = res.data.total
          console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
          this.listLoading = false
        });
      } else {
        request({
          url: `/api/example/gpsInfo/getListByGroup`,
          method: "post",
          params: this.listQuery
        }).then((res) => {
          console.log("🚀 ~ :122 ~ initData ~ res:", res)
          this.tableData = res.data;
          this.total = this.tableData.length
          console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
          this.listLoading = false
        });
      }

    },
    handleUpdateState(row) {
      this.$refs.positionDialog.openDialog({
        imageUrls: row.imageUrls,
        // remark: row.remark
      });
    },
    reset() {
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      this.listQuery.name = ''
      this.listQuery.type = 'person'
      this.listQuery.currentPage = 1
      this.listQuery.pageSize = 20
      this.initData()
    },
    openMap(row) {
      console.log("🚀 ~ :167 ~ openMap ~ row:", row)
      this.initialCoordinates = [row.lng, row.lat]
      this.locationVisible2 = true;
    },
    mapRtn() {
      this.locationVisible2 = false
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form {
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) {
  .user-form {
    margin-top: 98px;
  }
}
@media (max-width: 768px) {
  .user-form {
    margin-top: 168px;
  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>